<!--page content-->
<div id="myVue" class="right_col" role="main" xmlns:v-model="http://www.w3.org/1999/xhtml">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <p>===========================</p>
        <h3>获取数据</h3>
        <p>name：{{user.name}}</p>
        <p>===========================</p>
        <h3>单向绑定数据</h3>
        <input type="text" :value="user.name" />
        <p>===========================</p>
        <h3>绑定事件</h3>
        <button @click="test_1()">test_1</button>
        <p>===========================</p>
        <h3>双向绑定事件</h3>
        <input type="text" v-model:value="user.name" />
        <input type="text" v-model="user.name" />
        <p>===========================</p>
        <h3>绑定事件</h3>
        <button id="test_2" price="22.33" @click="test_2($event)">test_2</button>
        <p>===========================</p>
        <!--<h3>循环绑定事件</h3>
        <select>
            <option v-for="(city,index) in cities" :value="city.cityId">{{city.cityName}}</option>
        </select>
        <table>
            <thead><tr><td>id</td><td>name</td></tr></thead>
            <tbody>
                <tr v-for="(city,index) in cities">
                    <td>{{city.cityId}}</td>
                    <td>{{city.cityName}}</td>
                </tr>
            </tbody>
        </table>-->
        <p>===========================</p>
        <h3>自定义模板</h3>
        <button-demo></button-demo>
        <button-count></button-count>

    </div>
</div>
<!--/page content-->
<script>
    $(function () {
        // alert("this is init function");
        test_1();
    });
    Vue.component("button-demo",{
        template:"<button>button-demo</button>"
    });
    //组件方式一
    Vue.component("button-count",{
        data: function(){
            return{
                count:0,
            };
        },
        methods: {
            count_fun:function () {
                this.count +=1;
            },
        },
        template:"<button @click='count_fun'>{{count}}</button>"
    });
    var myVue=new Vue({
        el:"#myVue",
        data:{
            user:{
                name:"yuchen",
                age:18,
                gender:"male"
            },
            cities:[{
                cityId:"1",
                cityName:"chengdu"
            }, {
                cityId:"2",
                cityName:"wuhan"
            }]

        },
        methods:{
            test_1:function(){
                console.log(this.user);
            },
            test_2:function(event){
                console.log(event);
                // console.log(event.ori);
            },
            initCities:function () {
                var countryId=522;
                var self=this;
                $.ajax({
                    url:"/api/cities/"+countryId,
                    type:"get",
                    success:function (rs) {
                        self.cities=rs;
                    },
                    error:function (data) {
                        layer.alert(data.responseText,{icon:0});
                    }
                });
            }
        },
        //将vue函数赋值给window时挂钩
        created:function(){
          window.test_1=this.test_1;
        },
        //mounted生命周期挂钩子-----初始化
        mounted:function () {
            this.initCities();
        }
    });
</script>